<template>
  <div class="tab-bar-item" @click="itemClick">
    <div v-if="!isActive">
      <slot name="item-icon"></slot>
    </div>
    <div v-else>
      <slot name="item-icon-active"></slot>
    </div>
    <div :style="activeStyle">
      <slot name="item-text"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "TabBaritem",
  //props父组件向子组件传递值，这里是传路由地址
  props: {
    link: String,
    activeColor: {
      type: String,
      default: 'red'
    }
  },
  data() {
    return {
      //isActive: true //用于处理显示是否活跃的图片和文字
    }
  },
  //计算属性
  computed: {
    isActive() {
      //console.log(this.link + "link")
      //console.log(this.$route.path + "活跃路由")
      //因为这个组件被多次调用，那么当现在的活跃路由等于父组件传进来的路由地址的时候
      //就说明这个组件正在被点击
      if (this.link === this.$route.path) {
        return true
      }
      else {
        return false;
      }
      //上面的方法还有简写
      //indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
      //如果没有找到匹配的字符串则返回 -1。
      //return this.$route.path.indexOf(this.link) !== -1
    },
    activeStyle() {
      //如果当前组件等于活跃路由，则返回父组件传递进来的字体颜色，否则返回空对象
      return this.isActive ? {color: this.activeColor} : {}
    }
  },
  //定义方法
  methods: {
    //单个导航的点击事件
    itemClick() {
      //跳转路由
      //replace方式跳转浏览器没有退回按钮功能，用push跳转浏览器有退回按钮功能
      //this.$router.replace(this.link)
      this.$router.push(this.link)
    }
  }
}
</script>

<style scoped>
    .tab-bar-item {
      flex: 1;
      text-align: center;
      height: 49px;
      font-size: 14px;
    }
    .tab-bar-item img {
      width: 24px;
      height: 24px;
      margin-top: 3px;
      vertical-align: middle;
    }
</style>
